<template>
<div class="public-common">
    <!--业务办理 && 好人好事-->
    <div class="public-title">好人好事列表</div>
    <div class="public-searchbox">
        <el-row>
            <el-col :span="6">
                <el-input placeholder="请输入内容" v-model="form.test" class="input-with-select"  size="mini" />
            </el-col>
            <el-col :span="18">
                <el-button type="primary" icon="el-icon-search" size="mini"  style="margin-left:10px;">搜索</el-button>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="form.isVisible=true">高级查询</el-button>
                <el-button type="success" size="mini"  icon="el-icon-edit-outline">新建</el-button>
                <el-button type="danger" size="mini"  icon="el-icon-delete">删除</el-button>
                <el-select v-model="form.motorcade" filterable clearable placeholder="请选择车队打印(不选择为全部)" size="mini">
                    <el-option
                    v-for="item in select.motorcade"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <el-button type="warning" size="mini"  icon="el-icon-printer">打印</el-button>
            </el-col>
        </el-row>
    </div>
    <el-scrollbar class="public-scroll">
        <el-table :data="tabledata" size="mini" border stripe header-row-class-name="textcenter">
            <el-table-column
            type="selection"
            width="55" fixed="left">
            </el-table-column>
            <el-table-column
                label="车牌号">
                <template slot-scope="scope">
                    {{scope.row.carId}}
                </template>
            </el-table-column>                
            <el-table-column
                label="驾驶员">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="发生时间">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="好事类型">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="简要事迹">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="结果">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>            
            <el-table-column
                label="受益人">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="受益人电话">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="是否有附件">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="拾金不昧的类型">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="拾金不昧的数量">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>   
            <el-table-column
                label="是否媒体报道">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="感谢信数量">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="登记时间">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="操作" fixed="right">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini">编辑</el-button>
                </template>
            </el-table-column>             
        </el-table>
    </el-scrollbar>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.now"
        :page-sizes="page.sizes"
        :page-size="page.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total" style="margin-top:10px;">
    </el-pagination>

    <!--dialog-->
    <el-dialog title="好人好事" :visible.sync="dialog.isVisible" width="500px" top="10vh">
        <el-scrollbar style="height:350px;">
            <el-form size="mini" label-width="120px">
                <el-form-item label="车牌号">
                    <el-select v-model="dialog.carid" filterable clearable placeholder="请选择" size="mini">
                        <el-option
                        v-for="item in select.carids"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="驾驶员">
                    <el-input v-model="dialog.test"></el-input>
                </el-form-item>
                <el-form-item label="发生时间">
                    <el-date-picker
                    v-model="dialog.test"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期时间" style="width:100%;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="好事类型">
                    <el-select v-model="dialog.test" filterable clearable placeholder="请选择" size="mini">
                        <el-option
                        v-for="item in select.goodtypes"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="简要事迹">
                    <el-input type="textarea" v-model="dialog.test" :autosize="{ minRows: 2, maxRows: 4 }"></el-input>
                </el-form-item>
                <el-form-item label="结果">
                    <el-input v-model="dialog.test"></el-input>
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="受益人">
                            <el-input v-model="dialog.test"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="电话" label-width="60px">
                            <el-input v-model="dialog.test"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="是否有附件">
                    <el-checkbox v-model="dialog.checked">是</el-checkbox>
                    <el-button type="primary" v-if="dialog.ischecked" style="margin-left:20px">下载附件</el-button>
                </el-form-item>
                <el-form-item label="上传附件">
                    <el-row>
                        <el-col :span="12">
                            <el-input v-model="dialog.test" disabled></el-input>
                        </el-col>
                        <el-col :span="12">
                            <el-upload
                            action="##" accept="image/png,image/gif,image/jpeg" :show-file-list="false"
                            :on-change="handleChange" style="float:left;margin:0 10px;">
                                <el-button size="mini" type="primary">
                                    {{dialog.ischecked?"修改":"上传"}}
                                </el-button>
                            </el-upload>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="拾金不昧类型">
                            <el-select v-model="dialog.test" filterable clearable placeholder="请选择" size="mini" style="width:100%">
                                <el-option
                                v-for="item in select.sjbmtype"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="数量" label-width="60px">
                            <el-input v-model="dialog.test"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="是否媒体报道">
                            <el-checkbox v-model="dialog.mediareport">是</el-checkbox>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="感谢信数量" label-width="120px">
                            <el-input v-model="dialog.test"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="登记时间">
                    <el-date-picker
                    v-model="dialog.test"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期时间" style="width:100%;">
                    </el-date-picker>
                </el-form-item>
            </el-form>
        </el-scrollbar>
        <div class="textcenter">
            <el-button type="primary">确定</el-button>  
            <el-button type="info" @click="dialog.isVisible = false">返回</el-button>
        </div>
    </el-dialog>
    <!--高级查询--->
    <el-dialog title="高级查询" :visible.sync="form.isVisible" width="400px">
        <el-form size="mini" label-width="120px">
            <el-form-item label="发生开始时间">
                <el-date-picker
                v-model="form.starttime"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择日期时间" style="width:100%;">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="发生截止时间">
                <el-date-picker
                v-model="form.endtime"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择日期时间" style="width:100%;">
                </el-date-picker>
            </el-form-item>
            <div style="text-align:center;">
                <el-button type="primary" size="mini">确定</el-button>  
                <el-button type="warning" size="mini" @click="resetFormsearch()">重置</el-button>  
                <el-button type="info" @click="form.isVisible = false" size="mini">返回</el-button>
            </div>
        </el-form>
    </el-dialog>
</div>
</template>
<script>
export default {
    data(){
        return {
            form:{
                test:'',
                isVisible:false,
                starttime:'',
                endtime:''
            },
            tabledata:[],
            page:{
              now:1,
              pagesize:10,
              sizes:[2,10, 20, 50, 100],
              total:0,
              key:''
            },
            select:{
                carids:[],
                types:[],
                motorcade:[],
                goodtypes:[],
                sjbmtype:[]
            },
            dialog:{
                isVisible:false,
                test:'',
                checked:true,
                ischecked:true,
                mediareport:true
            }
        }
    },
    components:{
    },
    mounted(){
        
    },
    methods:{
        resetFormsearch(){
            this.form.starttime = '';
            this.form.endtime = '';
            
        },
        handleChange(file, fileList){
            console.log("file",file)
        },
        search(){
            alert("search")
        },
        //分页
        handleSizeChange(pagesize){
            this.page.pagesize = pagesize;
            this.search(true,true);
        },
        handleCurrentChange(pageno){
            this.page.now = pageno;
            this.search(true,true);
        }

    }
}
</script>